<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #list{
            display: block;
        }
    </style>
</head>
    <!-- 点击按钮，下面的url隐藏 -->
    <button class="btn">显示/隐藏</button>
    <ul class="list">
        <li>html</li>
        <li>css</li>
        <li>JS</li>
        <li>ES6\7\8\9\10</li>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>bootstrap</li>
    </ul>
</body>
<script src="./jquery.js"></script>
<script>

    // 开发形式
    // 1.HTML CSS JS进行原生开发
    // 2.调用第三方库 提高开发效率
    // 3.SPA(单页面开发：single page application)

    // 组件化开发
    //开发环境
    // node npm webpack（构建工具）



    // console.log($('.btn'));
    // // jquery 版本
    // $('.btn').click(function(){
    //     // $('.list').hide();
    //     // $('.list').toggle();
    //     // $('.list').slideUp();
    //     $('.list').slideToggle();
    // })

    // 原生JS版本
    // var btn=document.getElementById("btn");
    // var list=document.getElementById("list");
    // var flag=true;

    // // let btn=document.querySelector(".btn"),
    // //     list=document.querySelector('.list');
    // btn.onclick=function(){
        
    //     if(flag){
    //         list.style.display="none";
    //     }
    //     else{
    //         list.style.display="block";
    //     }
    //     flag=!flag;
    //     // if(list.style.display=="none"){
    //     //     list.style.display="block";
    //     // }
    //     // else{
    //     //     list.style.display="none";
    //     // }
    // }
</script>
</html>